<template>
    <div class="card">
        <!--    <top-list-detail title="微博热搜榜" :list-data="homeStore.topListData.WeiBo"></top-list-detail>-->
        <div class="header">
            <template v-for="(value, key) in titles" :key="key">
                <span
                    :class="['tag', activeIndex === key ? 'tag-active' : '']"
                    @mouseover="handlerMouseOver(key)"
                    @click="handlerClickTag(key)"
                    >{{ value }}</span
                >
            </template>
        </div>

        <swiper-view
            class="swiper"
            ref="swiperCompRef"
            :is-auto-play="false"
            :is-loop="false"
            @slideChange="handlerSwiperSlide">
            <template v-for="item in Object.keys(titles).length" :key="item">
                <swiper-slide>
                    <ul class="list-data">
                        <template v-for="(item, index) in listData" :key="index">
                            <li>
                                <a class="item" :href="item.link" target="_blank">
                                    <span class="item-index">{{ item.index }}</span>
                                    <span class="item-title text-elip">{{ item.title }}</span>
                                    <span class="item-hotValue">{{ item.hotValue }}</span>
                                </a>
                            </li>
                        </template>
                    </ul>
                </swiper-slide>
            </template>
        </swiper-view>
    </div>
</template>

<script setup lang="ts">
    import { useHomeStore } from "@/store/home";
    import { ref, watch } from "vue";
    import type { TopList } from "@/model/topList";
    import type { TopListId } from "@/api/api_everyday";
    import { useRouter } from "vue-router";
    import SwiperView from "@/components/global/SwiperView.vue";
    import { SwiperSlide } from "swiper/vue";

    // const titles = ['微博', '今日头条', '知乎日报', '历史上的今天']
    const titles: Record<TopListId, string> = {
        WeiBo: "微博",
        TouTiao: "今日头条",
        ZhiHuRiBao: "知乎日报",
        BiliBili: "哔哩哔哩",
        TodayInHistory: "历史上的今天"
    };
    const activeIndex = ref<TopListId>("WeiBo");

    const homeStore = useHomeStore();

    // 列表数据
    const listData = ref<TopList>(homeStore.topListData.WeiBo.slice(0, 4));
    watch(
        () => homeStore.topListData.WeiBo.slice(0, 4),
        (value: TopList) => {
            listData.value = value;
        }
    );

    const getListDataByIndex = async (index: TopListId) => {
        await homeStore.getTopListData(index);
        listData.value = homeStore.topListData[index].slice(0, 4);
    };

    const swiperCompRef = ref();
    const handlerMouseOver = async (index: TopListId) => {
        activeIndex.value = index;
        await getListDataByIndex(index);
        const ind = Object.values(titles).findIndex(item => item === index);
        // swiperCompRef.value.swiperInstance.slideTo(ind)
    };

    const handlerSwiperSlide = async (index: number) => {
        activeIndex.value = Object.keys(titles)[index] as TopListId;
        await getListDataByIndex(activeIndex.value);
    };

    // 页面跳转
    const router = useRouter();
    const handlerClickTag = (key: TopListId) => {
        router.push({
            path: "/toplistdetail",
            query: { topListId: key, title: titles[key] }
        });
    };
</script>

<style scoped>
    .card {
        /*background-color: red;*/
        margin: 0 !important;
        width: 100%;
        height: 100%;
        padding: 14px;
        font-size: 12px;
        background-image: linear-gradient(135deg, rgba(20, 20, 20, 0.7), rgba(20, 20, 20, 0.4));
        backdrop-filter: blur(10px);
        border-radius: var(--card-border-radius);
    }

    .header {
        white-space: nowrap;
        overflow: hidden;
    }

    .header::-webkit-scrollbar {
        display: none;
    }

    .tag {
        display: inline-block;
        padding: 2px 4px;
        margin-right: 6px;
        border-radius: 3px;
        white-space: nowrap;
        color: #f1f1f1;
        cursor: pointer;
    }

    .tag-active {
        background-color: #158bb8;
        /*color: red;*/
    }

    .swiper {
        height: 100%;
    }

    .list-data {
        height: calc(100% - 25px);
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .item {
        display: flex;
        align-items: center;
        color: #ddd;
    }

    .text-elip {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .item-index {
        display: inline-block;
        min-width: 8px;
        margin-right: 5px;
    }

    .item-title {
        flex: 1;
        color: #f1f1f1;
    }

    .item:hover .item-title {
        color: #1890ff;
    }

    .item-hotValue {
        max-width: 60px;
        margin-right: 5px;
        color: rgb(238, 238, 238);
    }
</style>
